<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
    </style>
    <script type="importmap">
        {
             "imports":{
                 "three":"./node_modules/three/build/three.module.js",
                 "three/addons/":"./node_modules/three/examples/jsm/"
             }
         }
     </script>
    <script type="module">
        import * as THREE from 'three';
        import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
        const width=window.innerWidth;
        const height=window.innerHeight;
        // 创建场景
        const scene=new THREE.Scene();
        // 创建几何体: 平面缓冲几何体
        const geometry=new THREE.PlaneGeometry(1000,1000);
       
        // 创建环境光
        const ambientlight=new THREE.AmbientLight(0xffffff,1);
        // 将环境光添加到场景中
        scene.add(ambientlight);
        // 创建相机
        const camera=new THREE.PerspectiveCamera(45,width/height,1,1000);
        // 设置相机的位置
        camera.position.set(0,0,200);
        // 设置相机观察点坐标
        camera.lookAt(0,0,0);
        // 将相机添加到场景中
        scene.add(camera);
      

        // 创建渲染器
        const renderer=new THREE.WebGLRenderer();
        // 设置渲染尺寸
        renderer.setSize(width,height);


         // 创建贴片加载器
        const textureLoader=new THREE.TextureLoader();
        // 加载贴片文件
        textureLoader.load('./imgs/floor8.png',(texture)=>{

            // 开启阵列模式
            texture.wrapS=THREE.RepeatWrapping;
            texture.wrapT=THREE.RepeatWrapping;
            // 在水平垂直方向上的重复(阵列)次数
            texture.repeat.set(30,30);

            // 创建材质
            const material=new THREE.MeshLambertMaterial({
                // color:0xff00ff,
                map:texture,
                side:THREE.DoubleSide       // 双面可见, 默认只有正面可见
            });
            
            // 根据材质和几何体模型创建几何体
            const mesh=new THREE.Mesh(geometry,material);
            // 沿X轴旋转-90
            mesh.rotateX(-Math.PI/180*60);

            // 将几何体添加到场景中
            scene.add(mesh);

            // 执行渲染操作
            renderer.render(scene,camera);
        });

      

         // 创建相机轨道控制器
         const controls=new OrbitControls(camera,renderer.domElement);

         controls.addEventListener('change',()=>{
             // 重新执行渲染
             renderer.render(scene,camera);
         });


        // 将渲染结果挂载到页面中
        document.body.appendChild(renderer.domElement);
     </script>
</head>

<body>

</body>

</html>